<template>
	<el-main>
		<el-form ref="form" :model="form" label-width="80px">
		  <el-form-item label="学生姓名">
		    <el-input v-model="form.name"></el-input>
		  </el-form-item>
		  
		  <el-form-item label="学生头像">
			  <el-upload
			    class="avatar-uploader"
			    action="http://localhost:8090/file/upload"
			    :show-file-list="false"
			    :on-success="handleAvatarSuccess"
			    :before-upload="beforeAvatarUpload">
			    <img v-if="imageUrl" :src="imageUrl" class="avatar">
			    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			  </el-upload>
		  </el-form-item>
		  
		  <el-form-item label="学生性别">
		    <el-radio-group v-model="form.sex">
		      <el-radio label="1">男</el-radio>
		      <el-radio label="2">女</el-radio>
		    </el-radio-group>
		  </el-form-item>
		  
		  <el-form-item label="学生年龄">
		    <el-input v-model="form.age"></el-input>
		  </el-form-item>
		  
		  <el-form-item label="学生生日">
		      <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
		  </el-form-item>
		  
		  <el-form-item label="所属班级">
		    <el-select v-model="form.classesId" placeholder="所属班级">
		      <el-option :label="classes.name" :value="classes.id" v-for="classes in classesList"></el-option>
		    </el-select>
		  </el-form-item>
		  
		  <el-form-item label="所属省">
		    <el-select v-model="form.proviceId" placeholder="所属省" @change="listCity">
		      <el-option :label="provice.name" :value="provice.id" v-for="provice in proviceList"></el-option>
		    </el-select>
			<el-select v-model="form.cityId" placeholder="所属市" @change="listArea">
			  <el-option :label="city.name" :value="city.id" v-for="city in cityList"></el-option>
			</el-select>
			<el-select v-model="form.areaId" placeholder="所属区">
			  <el-option :label="area.name" :value="area.id" v-for="area in areaList"></el-option>
			</el-select>
		  </el-form-item>
		  
		  <el-form-item label="所属地区">
			  <el-cascader
			      v-model="selectAreaIdList"
			      :options="areaAllList"
				  :props="{value:'id',label:'name',children:'subList'}"
			      @change="handleAreaChange"></el-cascader>
		  </el-form-item>
		  		 
		  <el-form-item label="学生兴趣">
		    <el-checkbox-group v-model="form.hobbyIdList">
		      <el-checkbox :label="hobby.id" v-for="hobby in hobbyList">{{hobby.name}}</el-checkbox>
		    </el-checkbox-group>
		  </el-form-item>
		  
		  <el-form-item label="自我介绍">
		    <el-input type="textarea" v-model="form.introduction"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="onSubmit">立即创建</el-button>
		    <el-button>取消</el-button>
		  </el-form-item>
		</el-form>
	</el-main>
</template>

<script>
	export default {
		data(){
			return {
				form:{
					hobbyIdList:[],
					headerImg:null
				},
				classesList:[],
				hobbyList:[],
				areaAllList:[],
				selectAreaIdList:[], //用于回显数据
				proviceList:[],
				cityList:[],
				areaList:[],
				imageUrl:null
				
			}
		},
		methods:{
			//图片上传成功回调
			handleAvatarSuccess(res, file){
				console.log(res,file)
				//图片显示
				this.imageUrl = res.imgUrl;
				//保存图片，给form.headerImg赋值
				this.form.headerImg=res.imgUrl;
			},
			//图片上传之前，是调后台接口之前
			beforeAvatarUpload(file){
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
		
				if (!isJPG) {
				  this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
				  this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				console.log(11111111)
				return isJPG && isLt2M;
			},
			handleAreaChange(areaIdArr){
				console.log("selectAreaIdList",this.selectAreaIdList);
				//设置省、市、区的数据
				this.form.proviceId=areaIdArr[0];
				this.form.cityId=areaIdArr[1];
				this.form.areaId=areaIdArr[2];
			},
			onSubmit(){
				console.log(this.form);
				this.axios.post("http://localhost:8090/student/save",this.form).then(res=>{
					console.log(res);
					//如果成功，跳转到列表
					this.$router.push("/student")
				})
			},
			/* 查询所有班级 */
			listClasses(){
				this.axios.get("http://localhost:8090/classes/listAll").then(res=>{
					this.classesList = res.data;
				})
			},
			/* 查询所有兴趣爱好 */
			listHobby(){
				this.axios.get("http://localhost:8090/hobby/listAll").then(res=>{
					this.hobbyList = res.data;
				})
			},
			/* 查询所有城市 */
			listAllArea(){
				this.axios.get("http://localhost:8090/area/getListAll").then(res=>{
					this.areaAllList = res.data;
				})
			},
			/* 根据省的数据 */
			listProvice(){
				this.axios.get("http://localhost:8090/area/getListByPid",{params:{pid:1}}).then(res=>{
					this.proviceList = res.data;
				})
			},
			/* 根据市的数据 */
			listCity(){
				let pid = this.form.proviceId;
				this.axios.get("http://localhost:8090/area/getListByPid",{params:{pid:pid}}).then(res=>{
					this.cityList = res.data;
				})
			},
			/* 根据市的数据 */
			listArea(){
				let pid = this.form.cityId;
				this.axios.get("http://localhost:8090/area/getListByPid",{params:{pid:pid}}).then(res=>{
					this.areaList = res.data;
				})
			}
			
			
		},
		created(){
			//初始化班级数据
			this.listClasses();
			//初始化兴趣爱好数据
			this.listHobby();
			this.listAllArea();
			this.listProvice();
			//获取Id
			let params = this.$route.params;
			if(params.id>0){
				// this.form = {areaId:null};
				//查询数据回显
				// console.log(params.id);
				this.axios.get("http://localhost:8090/student/getStudentVoById",{params:{id:params.id}}).then(res=>{
					console.log(res);
					//级联菜单回显
					this.selectAreaIdList.push(res.data.proviceId);
					this.selectAreaIdList.push(res.data.cityId);
					this.selectAreaIdList.push(res.data.areaId);
					// this.areaId = res.data.areaId;
					console.log(this.selectAreaIdList);
					//三级联动回显
					this.cityList = res.data.cityList;
					this.areaList = res.data.areaList;
					//
					this.form = res.data;
					this.imageUrl = res.data.headerImg;
					// console.log(form)
				})
			}
			
		}
	}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>